<template>
  <div style="position: absolute;top: 60px;">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!--<el-tab-pane label="规划综合管理信息平台" name="first">-->

      <!--</el-tab-pane>-->
      <el-tab-pane label="账号密码" name="second">
        <el-form class="login-form"
                 status-icon
                 :rules="loginRules"
                 ref="loginForm"
                 :model="loginForm"
                 label-width="0">
          <el-form-item prop="username">
            <el-input size="small"
                      @keyup.enter.native="handleLogin"
                      v-model="loginForm.username"
                      auto-complete="off"
                      placeholder="请输入用户名">
              <i slot="prefix"
                 class="icon-yonghu"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input size="small"
                      @keyup.enter.native="handleLogin"
                      :type="passwordType"
                      v-model="loginForm.password"
                      auto-complete="off"
                      placeholder="请输入密码">
              <i class="el-icon-view el-input__icon"
                 slot="suffix"
                 @click="showPassword"></i>
              <i slot="prefix"
                 class="icon-mima"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="code">
            <el-row :span="24">
              <el-col :span="16">
                <el-input size="small"
                          @keyup.enter.native="handleLogin"
                          :maxlength="code.len"
                          v-model="loginForm.code"
                          auto-complete="off"
                          placeholder="请输入验证码">
                  <i slot="prefix"
                     class="icon-yanzhengma"></i>
                </el-input>
              </el-col>
              <el-col :span="8">
                <div class="login-code">
            <span class="login-code-img"
                  @click="refreshCode"
                  v-if="code.type == 'text'">{{code.value}}</span>
                  <img :src="code.src"
                       class="login-code-img"
                       @click="refreshCode"
                       v-else/>
                  <!-- <i class="icon-shuaxin login-code-icon" @click="refreshCode"></i> -->
                </div>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item style="display: flex;justify-content: space-around">
            <div style="display: flex;justify-content: space-between">
              <el-button type="primary"
                         size="small"
                         @click.native.prevent="handleLogin"
                         class="login-submit">登录
              </el-button>
              <el-button type="primary"
                         size="small"
                         @click.native.prevent="handleLoginToConsole"
                         class="login-submit">登录后台管理
              </el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import {randomLenNum} from "@/util/util";
  import {mapGetters} from "vuex";
  import {validatenull} from "@/util/validate";

  export default {
    name: "userlogin",
    data() {

      return {
        socialForm: {
          code: '',
          state: ''
        },
        loginForm: {
          username: null,
          password: null,
          code: "",
          redomStr: ""
        },
        checked: false,
        code: {
          src: "",
          value: "",
          len: 4,
          type: "image"
        },
        loginRules: {
          username: [
            {required: true, message: "请输入用户名", trigger: "blur"}
          ],
          password: [
            {required: true, message: "请输入密码", trigger: "blur"},
            {min: 6, message: "密码长度最少为6位", trigger: "blur"}
          ],
          code: [
            {required: true, message: "请输入验证码", trigger: "blur"},
            {min: 4, max: 4, message: "验证码长度为4位", trigger: "blur"}
          ]
        },
        passwordType: "password",
        activeName: 'second'
      };
    },
    watch: {
      $route() {
        const params = this.$route.query;
        this.socialForm.state = params.state;
        this.socialForm.code = params.code;
        if (!validatenull(this.socialForm.code)) {
          const loading = this.$loading({
            lock: true,
            text: `登录中,请稍后。。。`,
            spinner: 'el-icon-loading'
          });
          setTimeout(() => {
            loading.close()
          }, 2000);
          this.handleSocialLogin()
        }
      },
      'activeName'(val){
        if(val == 'first'){
          this.goTo();
        }
      }
    },
    created() {
      this.init();
      this.refreshCode();
    },
    mounted() {
    },
    computed: {
      ...mapGetters(["tagWel"])
    },
    props: [],
    methods: {
      goTo(){
        window.location.href = 'http://gmuser.zjzwfw.gov.cn'
      },
      init() {
        const params = this.$route.query;
        this.socialForm.state = params.state;
        this.socialForm.code = params.code;
        if (!validatenull(this.socialForm.code)) {
          const loading = this.$loading({
            lock: true,
            text: `登录中,请稍后。。。`,
            spinner: 'el-icon-loading'
          });
          setTimeout(() => {
            loading.close()
          }, 2000);
          this.handleSocialLogin();

        }
      },
      refreshCode() {
        this.loginForm.code = '';
        this.loginForm.randomStr = randomLenNum(this.code.len, true);
        this.code.type === 'text'
                ? (this.code.value = randomLenNum(this.code.len))
                : (this.code.src = `${process.env.VUE_APP_AXIOS_BASE_URL}/code?randomStr=${this.loginForm.randomStr}`);
      },
      showPassword() {
        this.passwordType == ''
          ? (this.passwordType = 'password')
          : (this.passwordType = '')
      },
      handleSocialLogin() {
        this.$store.dispatch('LoginBySocial', this.socialForm).then(
          () => {
            this.$router.push({path: this.tagWel.value});
          }
        )
      },
      handleLogin() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
              console.log(111232);
              this.$router.push({path: this.tagWel.value});
            }).catch(() => {
              this.refreshCode()
            })

          }
        });
      },
      handleLoginToConsole() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
              window.location.href = `${window.location.protocol}//${window.location.host}${process.env.VUE_APP_CONSOLE_INDEX}`
            }).catch(() => {
              this.refreshCode()
            })

          }
        });
      },
      handleClick(tab, event) {
      }
    }
  };
</script>


